<template>
	<div class="mine-profitcore-index-wrap">
		<van-nav-bar title="收益中心" left-arrow fixed @click-left="onClickLeft" />

		<div :style="{
			background: `url(${levelConfig.income_bg1}) no-repeat center`,
		}" class="profit-box">
		</div>
		<div :style="{
			background: `url(${levelConfig.income_bg2}) no-repeat center`,
			color: profitCore.level === 100 ? '#7A1000' : levelConfig.income_text_color
		}" class="profit-box-min">
			<div :style="{
				backgroundColor: levelConfig.income_text_color,
			}" class="my-level">当前级别：{{ levelConfig.name || '-' }}</div>

			<div class="profit-ul">
				<div class="profit-li" @click="handleCore(3)">
					<div class="profit-li-val">
						<!-- {{ Number(profitCore.balance).toFixed(2) }} -->
						{{ profitCore.balance }}
					</div>
					<div class="profit-li-label">
						{{ profitCore.balance_label }}
					</div>
				</div>
				<div class="profit-li" @click="handleCore(4)">
					<div class="profit-li-val">
						<!-- {{ Number(profitCore.subsidy).toFixed(2) || 0 }} -->
						{{ profitCore.subsidy }}
					</div>
					<div class="profit-li-label">{{ profitCore.subsidy_label }}</div>
				</div>
				<!-- <div class="profit-li" >
					<div class="profit-li-val" >{{profitCore.bonus_zj}}</div>
					<div class="profit-li-label" >创客奖金（元）</div>
				</div>
				<div class="profit-li" >
					<div class="profit-li-val" >{{ profitCore.bonus_hhr }}</div>
					<div class="profit-li-label" >合伙人奖金（元）</div>
				</div> -->
			</div>

			<div :style="{
				backgroundColor: levelConfig.income_text_color,
			}" class="widthdaw-btn active-btn" @click="getWithdrawal">提现</div>

		</div>

		<div class="profit_core_ist">
			<van-cell title="我的级别" icon="location-o" is-link @click="getLevel">
				<template #icon>
					<img src="../../../images/mine/pofit-icon-1.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon">
				</template>
			</van-cell>
			<!-- <van-cell title="服务中心" icon="location-o" is-link @click="getAgent">
				<template #icon>
					<img src="../../../images/mine/icon_fwzx.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon">
				</template>
			</van-cell> -->
			<van-cell title="消费补贴" icon="location-o" is-link @click="getSubsidy(1)">
				<template #icon>
					<img src="../../../images/mine/pofit-icon-2.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon">
				</template>
			</van-cell>
			<!-- <van-cell title="商城消费补贴" icon="location-o" is-link @click="getSubsidy(2)">
				<template #icon>
					<img src="../../../images/mine/icon_scbt.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon">
				</template>
			</van-cell> -->
			<van-cell title="余额明细" icon="location-o" is-link @click="getBalanceDetail(3)">
				<template #icon>
					<img src="../../../images/mine/pofit-icon-3.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon">
				</template>
			</van-cell>
			<!-- <van-cell title="我的软件" icon="location-o" is-link @click="getMySoftware">
				<template #icon>
					<img src="../../../images/mine/pofit-icon-4.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon" >
				</template>
			</van-cell> -->
			<!--   -->
			<van-cell title="商家推广" icon="location-o" is-link @click="getExtension" v-if="profitCore.extend_status > 0">
				<template #icon>
					<img src="../../../images/mine/pofit-icon-5.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon">
				</template>
			</van-cell>
			<!-- <van-cell title="联盟商家" icon="location-o" is-link @click="getUnionBusiness" v-if="profit.alliance_status>=1">
				<template #icon>
					<img src="../../../images/mine/mine-server-icon9.png" class="custom-icon" />
				</template>
				<template #right-icon>
					<img class="arrow-icon" :src="arrowIcon" >
				</template>
			</van-cell> -->
		</div>
	</div>
</template>
<script>
// 
import { USER_INCOME_CENTER } from '@/api/mine'
import {formatSubsidy} from '@/tool/methods'
export default {
	data() {
		return {
			arrowIcon: require('@/images/mine/profit-arrow-icon.png'),
			profitCore: {},
			levelConfig: {}
		}
	},
	// computed: {
	// 	levelConfig() {
	// 		switch (this.profitCore.level) {
	// 			case 0:
	// 				return {
	// 					bg: require('@/images/mine/level_bg_s.png'),
	// 					minBg: require('@/images/mine/level_s.png'),
	// 					color: '#402C82'
	// 				};
	// 				break;
	// 			case 1:
	// 				return {
	// 					bg: require('@/images/mine/level_bg_s.png'),
	// 					minBg: require('@/images/mine/level_s.png'),
	// 					color: '#402C82'
	// 				};
	// 				break;
	// 			case 2:
	// 				return {
	// 					bg: require('@/images/mine/level_bg_s1.png'),
	// 					minBg: require('@/images/mine/level_s1.png'),
	// 					color: '#986D3E'
	// 				};
	// 				break;
	// 			case 3:
	// 				return {
	// 					bg: require('@/images/mine/level_q.png'),
	// 					minBg: require('@/images/mine/level_bg_q.png'),
	// 					color: '#32647B'
	// 				};
	// 				break;
	// 			// case 103:
	// 			// 	return {
	// 			// 		bg: require('@/images/mine/level-income-5.png'),
	// 			// 		minBg: require('@/images/mine/level-income-bg-5.png'),
	// 			// 		color: '#6A3F38'
	// 			// 	};
	// 			// 	break;
	// 			// case 102:
	// 			// 	return {
	// 			// 		bg: require('@/images/mine/level-income-6.png'),
	// 			// 		minBg: require('@/images/mine/level-income-bg-6.png'),
	// 			// 		color: '#402C82'
	// 			// 	};
	// 			// 	break;
	// 			case 101:
	// 				return {
	// 					bg: require('@/images/mine/level-income-7.png'),
	// 					minBg: require('@/images/mine/level_s.png'),
	// 					color: '#343560'
	// 				};
	// 			// 	break;
	// 			// case 100:
	// 			// 	return {
	// 			// 		bg: require('@/images/mine/level-income-8.png'),
	// 			// 		minBg: require('@/images/mine/level-income-bg-8.png'),
	// 			// 		color: '#DB3D1D'
	// 			// 	};
	// 			// 	break;
	// 		}
	// 	}
	// },
	mounted() {
		window.scrollTo(0, 0)
		this.$http.get(USER_INCOME_CENTER).then(res => {
			this.profitCore = res.data
			this.profitCore.balance = formatSubsidy(this.profitCore.balance)
			this.profitCore.subsidy = formatSubsidy(this.profitCore.subsidy)
			// this.profitCore.subsidy = Number(3.446) || 0
			this.levelConfig = res.data.level_data
			// this.items = res.data.items
		})
	},
	methods: {
		// formatSubsidy(value) {
		// 	const subsidy = Number(value) || 0;
		// 	const formattedSubsidy = subsidy.toString().includes('.')
		// 		? subsidy.toString().split('.')[1].length > 2
		// 			? subsidy.toString().split('.')[0] + '.' + subsidy.toString().split('.')[1].slice(0, 2)
		// 			: subsidy.toString()
		// 		: subsidy.toString() + '.00';

		// 	return formattedSubsidy;
		// },
		onClickLeft() {
			this.$router.push({ name: 'mine' })
		},
		// 提现
		getWithdrawal() {
			this.$router.push({
				path: '/withdrawal'
			})
		},
		// 我的级别
		getLevel() {
			if (this.profitCore.level <= 0) {
				this.$router.push({
					path: '/applyAgent'
				})
			} else {
				this.$router.push({
					path: '/level'
				})
			}

		},
		// 消费补贴
		getSubsidy(id) {
			this.$router.push({
				path: '/subsidy',
				query: {
					id: id
				}
			})
		},
		// 余额明细
		getBalanceDetail(id) {
			this.$router.push({
				path: '/consumptionGold',
				query: {
					id: id
				}
			})
		},
		//服务中心
		getAgent() {
			this.$router.push({
				path: "/agentQuery",
			});
		},
		// 我的软件
		getMySoftware() {
			this.$router.push({
				path: '/mySoftware'
			})
		},
		// 商家推广
		getExtension() {
			this.$router.push({
				path: '/extension',
				query: {
					level_name: this.levelConfig.name
				}
			})
		},
		// 联盟商家
		getUnionBusiness() {
			this.$router.push({
				path: '/unionBusiness'
			})
		},
		// 提现
		handleCore(id) {
			this.$router.push({
				path: '/consumptionGold',
				query: {
					id: id
				}
			})
			// this.$router.push({
			// 	path: "/withdrawal"
			// });
		},
	},
}
</script>
<style lang="scss">
.mine-profitcore-index-wrap {
	min-height: 100vh;
	padding-top: 46px;
	padding-bottom: 0.6rem;
	background-color: #f4f4f4;
	box-sizing: border-box;

	.van-nav-bar .van-icon {
		color: #333333;
	}

	.van-nav-bar__arrow {
		font-size: 20px;
	}

	.van-hairline--bottom::after {
		display: none;
	}

	.profit-box {
		width: 100%;
		height: 4.8rem;
		padding-top: 0.56rem;
		box-sizing: border-box;
		background-size: cover !important;
	}

	.profit-box-min {
		position: relative;
		width: 7.02rem;
		height: 3.66rem;
		margin: auto;
		margin-top: -4.24rem;
		background-size: cover !important;

		.my-level {
			position: absolute;
			left: 0;
			top: 0.28rem;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 0.52rem;
			padding: 0 0.2rem;
			font-weight: 400;
			font-size: 0.28rem;
			color: #FFFFFF;
			border-radius: 0 2rem 2rem 0;
		}

		.profit-ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding-top: 1.12rem;

			.profit-li {
				text-align: center;
				width: 48%;
				margin-bottom: 0.4rem;

				.profit-li-val {
					height: 0.44rem;
					margin-bottom: 0.1rem;
					line-height: 0.44rem;
					font-size: 0.32rem;
					font-weight: 500;
				}

				.profit-li-label {
					height: 0.4rem;
					line-height: 0.4rem;
					font-size: 0.28rem;
					font-weight: 400;
				}
			}

		}

		.widthdaw-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 5.34rem;
			height: 0.8rem;
			margin: auto;
			font-size: 0.28rem;
			color: #FFFFFF;
			border-radius: 0.4rem;
		}
	}

	.profit_core_ist {
		display: flex;
		flex-direction: column;
		width: 7.02rem;
		padding: 0.08rem 0;
		margin: auto;
		margin-top: 0.24rem;
		border-radius: 0.16rem;
		overflow: hidden;
		background-color: #FFFFFF;

		/* 垂直排列 */
		.van-cell {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 8px;
			padding: 8px 16px;

			&::after {
				display: none;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		.arrow-icon {
			width: 0.32rem;
			height: 0.32rem;
		}

		.custom-icon {
			width: .48rem;
			height: .48rem;
			margin-right: 0.2rem;
		}
	}
}
</style>
